<template>
  <div>
    <el-steps v-for="row in tableData" :key="row.id" class="margin-tb-lg" align-center process-status="finish"
              finish-status="success"
    >
      <el-step :status="
        (row.bill_sale_flow_status_name==='已通过' && row.bill_sale_status_name==='正常') ? 'success' : (
          (row.bill_sale_flow_status_name==='被退回' || row.bill_sale_status_name==='挂起' || row.bill_sale_status_name==='作废') ? 'error' : 'finish')
      "
      >
        <div slot="title" class="text-sm">
          <BFViewDetailBtn :id="row.id" :show-expand="saleOrderShowExpand" :show-tip="saleOrderShowTip"
                           :name="'销售单（'+row.bill_sale_date+'）'"
                           :class-name="(row.bill_sale_flow_status_name==='已通过' && row.bill_sale_status_name==='正常') ? 'text-green' : (
                             (row.bill_sale_flow_status_name==='被退回' || row.bill_sale_status_name==='挂起' || row.bill_sale_status_name==='作废') ? 'text-red' : 'text-blue')"
                           @toDetail="openSaleOrderDialog"
          >
            <BFBillSaleAfterTypeTag slot="prefix" class="margin-right-xs" :name="row.bill_sale_type_name"/>
            <el-descriptions slot="expandContent" :column="2" size="mini" border>
              <el-descriptions-item label="流程状态">
                <BFFlowStatusTag :name="row.bill_sale_flow_status_name"/>
              </el-descriptions-item>
              <el-descriptions-item label="类型">
                <BFBillSaleAfterTypeTag :name="row.bill_sale_type_name"/>
              </el-descriptions-item>
              <el-descriptions-item label="状态">
                <BFStatusTag :name="row.bill_sale_status_name"/>
              </el-descriptions-item>
              <el-descriptions-item label="资源">
                {{ row.bill_sale_media_type_names }}
              </el-descriptions-item>
              <el-descriptions-item v-if="saleOrderShowMoney" label="执行金额">
                {{ row.bill_sale_execute_amount }} 元
              </el-descriptions-item>
              <el-descriptions-item label="执行期">
                {{ row.bill_sale_date }}
              </el-descriptions-item>
            </el-descriptions>
          </BFViewDetailBtn>
        </div>
      </el-step>
      <el-step
        :status="(!row.bill_market_has) ? 'wait' : ((row.bill_market_flow_status_name==='已通过') ? 'success' : ((row.bill_market_flow_status_name==='被退回') ? 'error' : 'finish'))"
      >
        <div slot="title" class="text-sm">
          <BFViewDetailBtn :id="row.bill_market_id" :show-expand="marketOrderShowExpand"
                           :show-tip="marketOrderShowTip" :disabled="!row.bill_market_has"
                           :name="'市场单'"
                           :class-name="(!row.bill_market_has) ? 'text-gray' : ((row.bill_market_flow_status_name==='已通过') ? 'text-green' : ((row.bill_market_flow_status_name==='被退回') ? 'text-red' : 'text-blue'))"
                           @toDetail="openMarketOrderDialog"
          >
            <el-descriptions slot="expandContent" :column="2" size="mini" border>
              <el-descriptions-item label="流程状态">
                <BFFlowStatusTag :name="row.bill_market_flow_status_name"/>
              </el-descriptions-item>
              <el-descriptions-item label="类型">
                <BFBillSaleAfterTypeTag :name="row.bill_market_type_name"/>
              </el-descriptions-item>
              <el-descriptions-item label="拍照要求">
                <el-tag v-if="row.bill_market_shoot_requirement_confirmed" size="mini" type="success"
                        effect="plain"
                >已确认
                </el-tag>
                <el-tag v-else size="mini" type="info" effect="plain">未确认</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="生成链接">
                <el-tag v-if="row.bill_market_link_generated" size="mini" type="success" effect="plain">
                  生成
                </el-tag>
                <el-tag v-else size="mini" type="info" effect="plain">未生成</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="客户确认">
                <el-tag v-if="row.bill_market_customer_confirmed" size="mini" type="success"
                        effect="plain"
                >
                  已确认
                </el-tag>
                <el-tag v-else size="mini" type="info" effect="plain">未确认</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </BFViewDetailBtn>
        </div>
      </el-step>
      <el-step :status="(!row.bill_market_designed) ? 'wait' : 'success'">
        <div slot="title" class="text-sm">
          <BFViewDetailBtn :name="'画面上传'" :class-name="(!row.bill_market_designed) ? 'text-gray' : 'text-green'"/>
        </div>
      </el-step>
      <el-step :status="
        (!row.bill_ad_make_has) ? 'wait' : ((row.bill_market_flow_status_name==='已通过') ? 'success' : ((row.bill_ad_make_flow_status_name==='被退回') ? 'error' : 'finish'))
      "
      >
        <div slot="title" class="text-sm">
          <BFViewDetailBtn :id="row.bill_ad_make_id" :show-expand="adMakeOrderShowExpand"
                           :show-tip="adMakeOrderShowTip" :disabled="!row.bill_ad_make_has"
                           :name="'制作单'" :class-name="
                             (!row.bill_ad_make_has) ? 'text-gray' : ((row.bill_market_flow_status_name==='已通过') ? 'text-green' : ((row.bill_ad_make_flow_status_name==='被退回') ? 'text-red' : 'text-blue'))
                           " @toDetail="openADMakeOrderDialog"
          >
            <el-descriptions slot="expandContent" :column="2" size="mini" border>
              <el-descriptions-item label="流程状态">
                <BFFlowStatusTag :name="row.bill_ad_make_flow_status_name"/>
              </el-descriptions-item>
              <el-descriptions-item label="类型">
                <BFBillSaleAfterTypeTag :name="row.bill_ad_make_type_name"/>
              </el-descriptions-item>
              <el-descriptions-item label="供应商">
                {{ row.bill_ad_make_dis_supplier }}
              </el-descriptions-item>
              <el-descriptions-item label="生成链接">
                {{ row.bill_ad_make_gen_link }}
              </el-descriptions-item>
              <el-descriptions-item label="已确认">
                {{ row.bill_ad_make_supplier_confirm }}
              </el-descriptions-item>
            </el-descriptions>
          </BFViewDetailBtn>
        </div>
      </el-step>
      <el-step :status="
        (!row.work_order_distributed) ? 'wait' : (row.work_order_distributed_finished ? 'success' : 'finish')"
      >
        <div slot="title" class="text-sm">
          <BFViewDetailBtn :show-expand="workOrderShowExpand" :expand-width="800"
                           :disabled="!row.work_order_distributed"
                           :name="'派工'"
                           :class-name="(!row.work_order_distributed) ? 'text-gray' : (row.work_order_distributed_finished ? 'text-green' : 'text-blue')"
          >
            <WorkOrderListTable v-if="(row.work_order_list || []).length > 0" slot="expandContent"
                                :table-data="row.work_order_list"
            />
          </BFViewDetailBtn>
        </div>
      </el-step>
      <el-step :status="(!row.broadcast_send) ? 'wait' : 'success'">
        <div slot="title" class="text-sm">
          <BFViewDetailBtn :name="'监播发送'"
                           :class-name="(!row.broadcast_send) ? 'text-gray' : 'text-green'"
          />
        </div>
      </el-step>
      <el-step :status="(!row.settle_material_upload) ? 'wait' : 'success'">
        <div slot="title" class="text-sm">
          <BFViewDetailBtn :name="'结算材料'"
                           :class-name="(!row.settle_material_upload) ? 'text-gray' : 'text-green'"
          />
        </div>
      </el-step>
      <el-step
        :status="(!row.invoice_make_out && !row.upload_material) ? 'wait' : !row.upload_material?'finish': 'success'"
      >
        <div slot="title" class="text-sm">
          <BFViewDetailBtn
            :id="row.invoice_apply_id"
            :name="(!row.invoice_make_out && !row.upload_material) ? '待开票' : !row.upload_material?'待上传回执': '开具发票'"
            :class-name="(!row.invoice_make_out && !row.upload_material) ? 'text-gray' : !row.upload_material?'text-blue':'text-green'"
            :show-tip="row.invoice_make_out" @toDetail="openInvoiceDialog"
          />
        </div>
      </el-step>
      <el-step :status="(!row.payment_receive) ? 'wait' : 'success'">
        <div slot="title" class="text-sm">
          <BFViewDetailBtn :name="'到款'" :id="row.account_received_ids" :show-tip="row.payment_receive"
                           :class-name="(!row.payment_receive) ? 'text-gray' : 'text-green'"
                           @toDetail="openReceivedDialog"
          />
        </div>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
import WorkOrderListTable from './WorkOrderListTable'
import BFFlowStatusTag from './BFFlowStatusTag'
import BFStatusTag from './BFStatusTag'
import BFBillSaleAfterTypeTag from './BFBillSaleAfterTypeTag'
import BFViewDetailBtn from './BFViewDetailBtn'
import common from '@/utils/common.js'
import {
  cloneDeep
} from 'lodash'

export default {
  name: 'BussinessFlowComponentBillSaleList',
  components: {
    WorkOrderListTable,
    BFFlowStatusTag,
    BFViewDetailBtn,
    BFStatusTag,
    BFBillSaleAfterTypeTag
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    saleOrderShowExpand: {
      type: Boolean,
      default: false
    },
    saleOrderShowTip: {
      type: Boolean,
      default: false
    },
    saleOrderShowMoney: {
      type: Boolean,
      default: false
    },
    marketOrderShowExpand: {
      type: Boolean,
      default: false
    },
    marketOrderShowTip: {
      type: Boolean,
      default: false
    },
    adMakeOrderShowExpand: {
      type: Boolean,
      default: false
    },
    adMakeOrderShowTip: {
      type: Boolean,
      default: false
    },
    workOrderShowExpand: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cardBodyStyle: {
        'padding': '5px'
      }
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    openSaleOrderDialog(id) {
      this.$emit('openSaleOrderDialog', id)
    },
    openMarketOrderDialog(id) {
      this.$emit('openMarketOrderDialog', id)
    },
    openADMakeOrderDialog(id) {
      this.$emit('openADMakeOrderDialog', id)
    },
    openInvoiceDialog(id) {
      if (id > 0) {
        this.$emit('openInvoiceDialog', id)
      }
    },
    openReceivedDialog(ids) {
      this.$emit('openReceivedDialog', ids)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-step.is-center .el-step__main .el-step__description {
  padding: 0 10px;
}
</style>
